<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Example 4 - jFrame</title>

	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

	<!--[if lt IE 7]>
		<link rel="stylesheet" href="css/ie_lt_7.css" type="text/css" />
	<![endif]-->
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="javascripts/v1/core/jFrame.js"></script>
	
	
	<script type="text/javascript">
		$(document).ready(function() {
				//function to call survey 	
				$('li.loadSurvey').click(function() {
					$.jFrame.start('survey', function() {	
						$.Example.survey('survey.html',
								  'jFrameSurvey6');
					});
					return false;
				});

				//function to start hideShow
				$.jFrame.start('hideshow', function(){
					$('div.hideshowWidget').Example().HideShow();
				});






				//function to clear survey cookie for example				
				$('li.clearCookie').click(function() {
						$.jFrame.start('cookies', function() {
							$.cookie('jFrameSurvey6', null, { expires: 30 });
						});
						return false;
				});
		});
	</script>

</head>
<body>

	<div id="wrapper" class="container_12 clear">

		<div class="column grid_12">
			<h1>Example 4 - <em>All previous examples together</em></h1>
		</div>

		<div class="column grid_7">
			
			<p>This example is merge of all existing examples. Although only the jQuery and jFrame javascript files are added in the header, we are also using: </p>
			<ul>
				<li>jquery.thickbox.js</li>
				<li>jquery.cookie.js</li>
				<li>survey.js</li>
				<li>hideshow.js</li>
			</ul>
				
			<h2>Survey</h2>
			<ul>
				<li class="loadSurvey"><a href="survey.html">Load the survey</a></li>
				<li class="clearCookie"><a href="#">Clear the cookie to load the survey again</a></li>
			</ul>
			
			<h2>Hide / Show content</h2>
				<div class="hideshowWidget">
					<p><a href="#" rel="hs_trigger" class="hs_vert closed">Show content</a></p>
					<div class="hs_widget">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

						</p>
					</div>
				</div>		
		</div>

		<div class="column grid_5 spotlight">
			<div>
				<h2>Uncoupling javascript from HTML</h2>
				<p>This example is from an article on uncoupling HTML and javascript using
					a jQuery script called jFrame.</p>
				
				<ul>
					<li><a href="../Documentation/How_to_use.html">Read the article: Uncoupling javascript from HTML</a></li>
				</ul>
				
				<h2>Examples</h2>
				<ul>
					<li><a href="example1.html">Example 1</a></li>
					<li><a href="example2.html">Example 2</a></li>
					<li><a href="example3.html">Example 3</a></li>
					<li><a href="example4.html">Example 4</a></li>
				</ul>
				
			</div>
		</div>
	</div>
</body>
</html>

